<!--包含头部文件-->
{include file="public/header" /}
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 类目管理 <span class="c-gray en">&gt;</span> 类目列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-10"> </div>
    <form class="form form-horizontal" name="ruleorder" method="post" action="" id="ajaxForm">
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr>
            <th scope="col" colspan="13">类目列表</th>
        </tr>
        <tr class="text-c">
            <!--<th width="25"><input type="checkbox" name="" value=""></th>-->
            <th width="40">ID</th>
            <th width="90">类目名称</th>
            <th width="150">状态</th>
            <th width="90">排序</th>
            <th width="100">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name='list' id='vo'}
        <tr class="text-c">
            <td>{$vo.id}</td>
            <td>{$vo.name}</td>
            <td>
                {if condition="$vo['status'] eq 1"}启用
                {else/}禁用
                {/if}
            </td>
            <td><input name="{$vo.id}" value="{$vo.sort}" style="width: 50px;"/></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:;" onclick="admin_edit('类目编辑','{:url(\'category/cate_edit\',[\'id\'=>$vo.id])}','1',800,600)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
        </tr>
        {/volist}
        <tr>
            <td colspan="5" align="left">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;排序&nbsp;&nbsp;">
                <span>按数值从小到大排序（每一个类目在服务器上都有设定时采集任务）</span>
            </td>

        </tr>
        </tbody>
    </table>
    </form>
    <div class="row">
        <div class="col-sm-2" id="pageBox">
            {$page}
        </div>
    </div>
</div>
<!--包含footer文件-->
{include file="public/footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="__STATIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    /*
     参数解释：
     title 标题
     url      请求的url
     id       需要操作的数据id
     w    弹出层宽度（缺省调默认值）
     h    弹出层高度（缺省调默认值）
     */
    /*店铺-增加*/
    function shop_add(title,url,w,h){
        layer_show(title,url,w,h);
    }
    /*店铺-删除*/
    function admin_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function(data){
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });

        });
    }

    /*店铺-编辑*/
    function admin_edit(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    /*店铺-停用*/
    function admin_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){
            //此处请求后台程序，下方是成功后的前台处理……
            $.post("admin/change_admin",'',function(result){
                console.log(result)
            });

            $(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_start(this,id)" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已禁用</span>');
            $(obj).remove();
            layer.msg('已停用!',{icon: 5,time:1000});
        });
    }

    /*管理员-启用*/
    function admin_start(obj,id){
        layer.confirm('确认要启用吗？',function(index){
            //此处请求后台程序，下方是成功后的前台处理……


            $(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_stop(this,id)" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6,time:1000});
        });
    }

    $(function () {
        // 排序
        $("#ajaxForm").validate({
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                var arr = new FormData(document.getElementById("ajaxForm"));
                $.ajax({
                    url:"{:url('category/cate_order')}",
                    type:"post",
                    data:arr,
                    async: true,
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success:function (data) {
                        if (data.code == 200){
                            layer.alert('排序成功',{
                                skin: 'layui-layer-molv' //样式类名 自定义样式
                                ,closeBtn: 0  // 是否显示关闭按钮
                                ,anim: 1 //动画类型
                                ,btn: '确认'//按钮
                                ,icon: 6  // icon
                                ,yes:function(){
                                    location.reload();
                                }
                            })
                        }else {
                            layer.alert('排序失败'+data.msg+'',{
                                skin: 'layui-layer-molv' //样式类名 自定义样式
                                ,closeBtn: 0  // 是否显示关闭按钮
                                ,anim: 1 //动画类型
                                ,btn: '确认'//按钮
                                ,icon: 6  // icon
                            })
                        }

                    },
                    error:function () {
                        layer.alert('排序失败',{
                            skin: 'layui-layer-molv' //样式类名 自定义样式
                            ,closeBtn: 0  // 是否显示关闭按钮
                            ,anim: 1 //动画类型
                            ,btn: '确认'//按钮
                            ,icon: 6  // icon
                        })
                    }
                })

            }
        });
    })
</script>
</body>
</html>
